<template>
  <!-- 这里之所以多写一个条件，避免了二级类目之间切换不显示骨架 -->
  <div class="sub-filter" v-if="filterData && !filterLoading" >
    <div class="item" >
      <div class="head">品牌：</div>
      <div class="body">

        <a href="javascript:;" @click="changeBrand(i.id)"
        :class="{active:filterData.selectedBrand===i.id}"
        v-for="i in filterData.brands" :key="i.id">{{i.name}}</a>
      </div>
    </div>
    <div class="item" v-for="item in filterData.saleProperties" :key="item.id">
      <div class="head">{{item.name}}</div>
      <div class="body">

        <a @click="changeProp(item,i.id)" :class="{active:item.selectedAttr===i.id}" href="javascript:;" v-for="i in item.properties" :key="i.id">{{i.name}}</a>
      </div>
    </div>
  </div>
  <div v-else class="sub-filter">
    <XtxSkeleton class="item" width="800px" height="40px"  />
    <XtxSkeleton class="item" width="800px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { getSubFilter } from '@/api/category'

// 同样，监听路由参数变化，获取请求参数发起请求
const filterData = ref(null)
const route = useRoute()
const filterLoading = ref(false)
watch(() => route.params.id, (nVal) => {
  // 条件，1存在 2是二级类目id
  if (nVal && `/category/sub/${nVal}` === route.path) {
    // 发请求
    filterLoading.value = true // 控制骨架屏显示
    getSubFilter(nVal).then(data => {
      // 给要筛选的条件加上全部项
      // 给每个数据加一个选中的表示
      data.result.selectedBrand = null // 默认给渲染数据添加选中全部
      data.result.brands.unshift({ id: null, name: '全部' })
      data.result.saleProperties.forEach(item => {
        item.selectedAttr = null // 默认给渲染数据添加选中全部
        item.properties.unshift({ id: null, name: '全部' })
      })
      filterData.value = data.result
      // 控制骨架屏消失
      filterLoading.value = false
    })
  }
}, {
  immediate: true // 立即触发一下
})
const emit = defineEmits(['filter-change'])
// 封装一个获筛选参数的函数
const getFilterParams = () => {
  const obj = { brandId: '', attrs: [] }
  // 品牌赋值
  obj.brandId = filterData.value.selectedBrand
  // 属性赋值
  filterData.value.saleProperties.forEach(item => {
    if (item.selectedAttr) { // 被选择的放进去
      const prop = item.properties.find(i => i.id === item.selectedAttr)
      obj.attrs.push({ groupName: item.name, propertyName: prop.name })
    }
  })
  if (obj.attrs.length === 0) obj.attrs = null // 令该字段为空，发请求时不会发送该字段
  return obj
}

const changeBrand = (id) => {
  // 判断重复操作

  if (filterData.value.selectedBrand === id) return
  filterData.value.selectedBrand = id
  emit('filter-change', getFilterParams())
}
const changeProp = (item, id) => {
  if (item.selectedAttr === id) return
  item.selectedAttr = id
  emit('filter-change', getFilterParams())
}

</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;

  .item {
    display: flex;
    line-height: 40px;

    .head {
      width: 80px;
      color: #999;
    }

    .body {
      flex: 1;

      a {
        margin-right: 36px;
        transition: all .3s;
        display: inline-block;

        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
.xtx-skeleton {
      padding: 10px 0;
    }
</style>
